<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored ="false"%>
    <?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Ruleta Jorge</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
		
		<script language="javascript">
		
		function crearApuesta(nro, fichas){
		window.location = "crearApuesta.jsp?nro="+nro+"&fichasDisponibles="+fichas;
		}
		
		function actualizar(valorG, valorA){
			
			
			document.getElementById("novamas").disabled =!valorG;
			document.getElementById("pagarApuestas").disabled= !valorA;
			
		}
		</script>
		
	</head>	
	<body  onload="javascript:actualizar(${mesa.puedeGirar},${mesa.deboPagar})">
		<div id="main">
	 		 <!-- header -->
	  		<div id="header">
				<!-- .logo -->
		    	<div class="logo">
		    		<a href="index.jsp"><img src="images/logo.jpg" alt="" /></a>
		   		 </div>
		    	<!-- /.logo -->
		    </div> <!--  cierro header -->
		<div id="content">
			<div class="tablero">
				<h2>Bienvenido <%= request.getAttribute("nombre") %> usted dispone de <%= request.getAttribute("fichas") %> fichas</h2>
				<table>
				<% int numero = 0; %>
				<td class ="celdaVerde"></td>
				<td class ="celdaVerde" width=80 height=80><div  onClick="crearApuesta('<%= numero %>', '<%=request.getAttribute("fichas")%>');"><%= numero %>
				<% if(request.getAttribute(Integer.toHexString(numero)) != null) { %> <!--  Pregunto si el numero fue apostado -->
				<h1><%= request.getAttribute(Integer.toHexString(numero)) %></h1> 
			    <% } %>
			    </div></td>
				<td class ="celdaVerde"></td>
				<tr>
				<% numero++; %>
				<% int negroRojo = 0; %>
				<%	
				    for ( int i = 0; i < 12 ; i++ ) {
				        %>
				        <% for ( int x = 0; x < 3; x++) { %>
				        <% if (negroRojo == 0) { %>
				        <td class ="celdaRoja" width=80 height=80> <div onClick="crearApuesta('<%= numero %>', '<%=request.getAttribute("fichas")%>');"><%= numero %>
				        <% negroRojo++; %>
				        <% } else { %>
				        <td class ="celdaNegra" width=80 height=80> <div onClick="crearApuesta('<%= numero %>', '<%=request.getAttribute("fichas")%>'	);"><%= numero %>
				        <% negroRojo--; %>
				        <% }%>
				        <% if(request.getAttribute(Integer.toHexString(numero)) != null) { %> <!--  Pregunto si el numero fue apostado -->
				        <h1><%= request.getAttribute(Integer.toHexString(numero)) %></h1> 
			        	<% } %>
				       	</td> <!--  Tengo que mostrar fichas si hay -->
				        <% numero++; %>
				       	<% } %>
				        <tr>
				        <%}%>
				</table>
				
				<a href="index.jsp">Volver</a>
			</div>

			<div class="ruleta">
				<% boolean giraronLaRuleta = false;
				
				if (request.getAttribute("numeroGanador") != null) { giraronLaRuleta = true; }%>
				
				<% if (giraronLaRuleta) { %>
				
				<h2>Salió el número <%= request.getAttribute("numeroGanador") %></h2>
				
					
				<%  } else { %>
				<h2></h2>
				<h2></h2>
				<% } %>
				<img src="images/ruleta.png" alt="" />
				<h2></h2>
				<h2></h2>
				<form name="novamas" action="girar"  method="post">
				<input type="submit" id="novamas" value="No va mas" disabled="true"/>
				</form>
				<form name="pagar" action="pagarApuestas" method="post">
				<input type="submit" id="pagarApuestas" value="Pagar apuestas" disabled="true"/>
				</form>
			</div>
			
		</div>
	</div>
		
	</body>
</html>